<!--
 * @Author: early-autumn
 * @Date: 2020-05-12 11:47:28
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 16:01:42
 -->
<template>
  <div class="label-value">
    <p class="label-value__label" :style="labelStyle">
      {{ label ? `${label}：` : '' }}
    </p>
    <p class="label-value__value">
      <slot />
    </p>
  </div>
</template>

<script>
export default {
  name: 'LabelValue',
  props: {
    label: {
      type: String,
      default: '',
    },
    labelWidth: {
      type: String,
      default: '100',
    },
    align: {
      validator: (value) => ['left', 'center', 'right'].indexOf(value) !== -1,
      default: 'right',
    },
  },
  computed: {
    labelStyle() {
      return {
        width: `${this.labelWidth}px`,
        textAlign: this.align,
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.label-value {
  margin: 15px 0;
  display: flex;

  .label-value__label {
    margin: 0;
    font-size: 14px;
  }

  .label-value__value {
    margin: 0;
    font-size: 14px;
    color: #303133;
  }
}
</style>
